
<template>
  <div>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-table
        ref="filterTable"
        :data="tableData"
        style="width: auto">

      <el-table-column
          label="订单id"
          prop="id"
          width="70">
      </el-table-column>

      <el-table-column
          label="订单编号"
          prop="number"
          width="150">
      </el-table-column>

      <el-table-column
          label="商品名称"
          prop="productid"
          width="200">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="productname in productnames" v-show="productname.id == scope.row.productid">
            {{productname.productname}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="订购数量"
          prop="num"
          width="100">
      </el-table-column>

      <el-table-column
          label="交付日期"
          prop="deliverydate"
          width="100">
      </el-table-column>

      <el-table-column
          label="投标截止日期"
          prop="tenderdate"
          width="120">
      </el-table-column>

      <el-table-column
          label="收货人"
          prop="recevierid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.name}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="收货联系方式"
          prop="recevierid"
          width="120">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.connection}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="收货人地址"
          prop="recevierid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.address}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          :filter-method="filterTag"
          :filters="tages"
          filter-placement="bottom-end"
          label="订单状态"
          prop="statusid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <el-tag
              disable-transitions>
          <span v-for="status in statuses" v-show="status.id == scope.row.statusid">
            {{status.status}}
          </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          :filter-method="filterTag"
          :filters="buttons"
          filter-placement="bottom-end"
          label="操作"
          width="300">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <el-button
              v-for="but in buttons"
              v-if="but.value == scope.row.statusid"
              :type="getButtonTypes(scope.row.statusid)"
              size="mini" @click="handleEdit(scope.$index, scope.row)">
              {{but.text}}
          </el-button>
          <el-button
              v-if="scope.row.statusid==1"
              size="mini"
              type="danger" @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
          <el-button
              v-if="scope.row.statusid==1"
              size="mini"
              type="success" @click="handleUpdate(scope.$index, scope.row)">修改
          </el-button>
        </template>
      </el-table-column>

    </el-table>


    <el-pagination
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 14,
      total: null,
      statuses:null,
      tableData: null,
      receviers:null,
      productnames:null,
      tages:[],
      currentPage:1,
      buttons:[{text:"发布",value:1},{text:"撤回",value:2},{text:"查看",value:3},{text:"收货",value:6}]
    }
  },created(){
    this.getTableData();
    axios.get('http://localhost:8081/orderstatus/findAll/').then(
        (response) => {
          this.statuses = response.data;

          for (const sta of this.statuses) {
            const tage = {text: sta.status, value: sta.id};
            this.tages.push(tage);
          }
        }
    );
    axios.get('http://localhost:8081/order/getProductname').then(
        (response) => {
          this.productnames = response.data;
        }
    );
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.statusid == value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    page(currentPage) {
      this.currentPage=currentPage;
      this.getTableData();
    },
    getButtonTypes(statusid){
      let type="";
      switch (statusid){
        case 1:
          type='primary';
          break;
        case 2:
          type='info';
          break;
        case 3:
          type='success';
          break;
        case 6:
          type='warning';
          break;
      }
      return type;
    },
    handleEdit(index, row) {
      switch (row.statusid){
        case 1:
        case 2:
          axios.get('http://localhost:8081/order/changestatus/' + row.id + '/' + row.statusid).then(
              (response) => {
                this.getTableData();
              }
          );
          break;
        case 3:
          this.$router.push({
            path:'/selecttender',
            query:{
              orderid:row.id,
            }
          });
          break;
        case 6:
          this.$confirm('收货前请检查货品的完整性，是否确认收货?', '确认收货', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.get('http://localhost:8081/order/changestatus/' + row.id + '/' + row.statusid).then(
                (response) => {
                  if (response.data=="success"){
                    this.getTableData();
                    this.$message({
                      type: 'success',
                      message: '收货成功，订单已完成!'
                    });
                  }else{
                    this.getTableData();
                    this.$message({
                      type: 'error',
                      message: '收货失败!'
                    });
                  }
                }
            );
          }).catch(() => {
            //什么也不做
          });
          break;
      }
    },
    handleDelete(index, row) {
      axios.get('http://localhost:8081/order/deleteById/' + row.id).then(
          (response) => {
            if(response.data == "success"){
              this.getTableData();
              this.success();
            }else{
              this.failed();
            }
          })
    },
    handleUpdate(index,row){
      this.$router.push({
        path:'/orderupdate',
        query:{
          id:row.id,
        }
      })
    },
    getTableData() {
      if (this.currentPage != 1) {
        axios.get('http://localhost:8081/order/findAllByUserid/'+this.currentPage + '/'+this.pageSize+'/'+this.$store.state.user.id).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      } else {
        axios.get('http://localhost:8081/order/findAllByUserid/1/'+this.pageSize+'/'+this.$store.state.user.id).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      }
      axios.get('http://localhost:8081/order/getReceviers').then(
          (response) => {
            this.receviers = response.data;
          }
      );
    },

  }
}
</script>